<template>
  <el-dialog
    v-model="state.ActualDataDialog.show"
    width="954px"
    title="实出数据确认"
    class="dialog"
  >
    <div class="dialogContent">
      <el-table
        :data="state.ActualDataDialog.tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="DutyParagraph"
          label="税号"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="Model"
          label="产品型号"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="ProductCn"
          label="商品中文名"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="ProductEn"
          label="商品英文名"
          width="200"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="MeasurementUnit"
          label="计量单位"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="PlannedQuantity"
          label="计划件数"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="Num" label="实出数据" sortable>
          <template #default="scope">
            <el-input
              v-model="scope.row.Num"
              @input="scope.row.Num = validateNumber(scope.row.Num)"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="state.ActualDataDialog.show = false">取消</el-button>
        <el-button type="primary" @click="ActualDataSubmit"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted, reactive, nextTick, defineExpose } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { validateNumber } from "@/utils/validate.js";

const state = reactive({
  ActualDataDialog: {
    show: false,
    tableData: [
      {
        DutyParagraph: "174784474",
        Model: "Q25014M",
        ProductCn: "潜水泵",
        ProductEn: "A batch of garden pump accessories",
        MeasurementUnit: "PSC",
        PlannedQuantity: 100,
        Num: 25,
      },
      {
        DutyParagraph: "174784474",
        Model: "Q25014M",
        ProductCn: "潜水泵",
        ProductEn: "A batch of garden pump accessories",
        MeasurementUnit: "PSC",
        PlannedQuantity: 100,
        Num: 25,
      },
      {
        DutyParagraph: "174784474",
        Model: "Q25014M",
        ProductCn: "潜水泵",
        ProductEn: "A batch of garden pump accessories",
        MeasurementUnit: "PSC",
        PlannedQuantity: 100,
        Num: 25,
      },
      {
        DutyParagraph: "174784474",
        Model: "Q25014M",
        ProductCn: "潜水泵",
        ProductEn: "A batch of garden pump accessories",
        MeasurementUnit: "PSC",
        PlannedQuantity: 100,
        Num: 25,
      },
    ],
  },
});

const openDialog = () => {
  state.ActualDataDialog.show = true;
};

const ActualDataSubmit = () => {
  ElMessage.success("成功");
  state.ActualDataDialog.show = false;
};
defineExpose({ openDialog });
</script>
<style lang="scss" scoped>
.MoreDialogContent {
  padding: 8px;
}

.MoreDialogText {
  color: rgba(60, 65, 68, 1);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;
}
</style>
